<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
</head>
<body>

<h3>1、javascript解释器</h3>
    JavaScript是独立的语言，浏览器有js解释器，从上往下执行
    http://www.cnblogs.com/wupeiqi/articles/5602773.html
<h3>2、JavaScript代码存在形式</h3>
    放在代码块尾部
    保存在文件中
    <script src="js文件路径"></script> 在HTML引入

<h3>3、注释</h3>
    单行注释//
    多行注释/* ... */

<h3>4、变量</h3>
    name = 'tom' # 全局变量
    var name = 'tom' # 局部变量

<h3>5、基本的数据类型</h3>
1、数字
    a = 15
    parseInt(..)    将某值转换成数字，不成功则NaN
    parseFloat(..) 将某值转换成浮点数，不成功则NaN
2、字符串
    obj.length                           长度
    obj.trim()                           移除空白
    obj.trimLeft()                       移除左边空白
    obj.trimRight()                      移除右边空白
    obj.charAt(n)                        返回字符串中的第n个字符
    obj.concat(value, ...)               拼接,等效于+
    obj.indexOf(substring,start)         子序列位置，正向查找
    obj.lastIndexOf(substring,start)     子序列位置,反向查找
    obj.substring(from, to)              根据索引获取子序列
    obj.slice(start, end)                切片
    obj.toLowerCase()                    大写
    obj.toUpperCase()                    小写
    obj.split(delimiter, limit)          分割
    obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)
    obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
    obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，
                                         $数字：匹配的第n个组内容；
                                         $&：当前匹配的内容；
                                         $`：位于匹配子串左侧的文本；
                                         $'：位于匹配子串右侧的文本
                                         $$：直接量$符号

3、布尔类型
    小写 true,false
    ==      比较值相等
    !=       不等于
    ===   比较值和类型相等
    !===  不等于
    ||        或
    &&      且
4、列表（数组）
    a = [1,2,3]
    JavaScript中的数组类似于Python中的列表
    常见功能：
        obj.length          数组的大小
        obj.push(ele)       尾部追加元素
        obj.pop()           尾部获取一个元素
        obj.unshift(ele)    头部插入元素
        obj.shift()         头部移除元素
        obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
                            obj.splice(n,0,val) 指定位置插入元素
                            obj.splice(n,1,val) 指定位置替换元素
                            obj.splice(n,1)     指定位置删除元素
        obj.slice( )        切片
        obj.reverse( )      反转
        obj.join(sep)       将数组元素连接起来以构建一个字符串
        obj.concat(val,..)  连接数组
        obj.sort( )         对数组元素进行排序
5、字典
    a = {'k1':'v1','k2':'v2'}
    跟Python类似
    a['k1']


6、定时器
    setInterval('执行的代码',间隔时间)

7、for循环
    1、方式一，循环的是元素的索引
        a = [1,2,3]
        for(var item in a ){
            console.log(a[item]);
        }
        a = {'k1':'v1','k2':'v2'}
        for(var item in a ){
            console.log(a[item]);
        }
    2、方式二,不支持字典循环
        for(var i=0;i<10;i++){
        }
        a = [1,2,3]
        for(var i=0;i<a.length;i++){
            console.log(a[i])
        }

    continue 退出本次循环
    break 退出循环

7.5、while循环
    while（条件）{
    }
8、条件语句
    ==      比较值相等
    !=       不等于
    ===   比较值和类型相等
    !===  不等于
    ||        或(or)
    &&      且(and)

    if(条件){
    }else{
    }

    if(条件){
    }else if(条件){
    }else{
    }

9、函数定义
    function 函数名(形参){
    }

9、switch语句
    switch(name){
        case:'1':
            console.log(123);
        case:'2':
            console.log(234);
        default:
            console.log(333)
    }

10、序列化
    JSON.stringify(obj)   序列化--将对象转换为字符串
    JSON.parse(str)        反序列化--将字符串转换为对象类型 //如views.py中将字典序列化后发给模板，模板可以使用JSON.parse()将字符串转换为对象。

11、转义
    用于客户端保存cookie，将数据经过转义后保存在cookie中。
        decodeURI( )                   URl中未转义的字符
        decodeURIComponent( )   URI组件中的未转义字符
        encodeURI( )                   URI中的转义字符
        encodeURIComponent( )   转义URI组件中的字符
        escape( )                         对字符串转义
        unescape( )                     给转义字符串解码
        URIError                         由URl的编码和解码方法抛出
    示例：
        a = 'https://www.sogou.com/web?query=数据库'
        "https://www.sogou.com/web?query=数据库"
        newUrl = encodeURI(a)
        "https://www.sogou.com/web?query=%E6%95%B0%E6%8D%AE%E5%BA%93"
        decodeURI(newUrl)
        "https://www.sogou.com/web?query=数据库"
        encodeURIComponent(a)
        "https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E6%95%B0%E6%8D%AE%E5%BA%93"

12、eval
    Python：
        val = eval(表达式)  eval(" '1' * '4' ")
              exec(执行代码) exec(for循环),没有返回值
    JavaScript：
        JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。
13、时间
    Data 类
    var d = new Date()  //当前时间
    d.getMinutes()  //获取
    d.setMinutes()  //设置

14、作用域
    ================ 1.JavaScript默认以函数作为作用域(除了let) =======================
    其他语言（C,C#）：以代码块{代码块}作为作用域
    Python：以函数作为作用域
    JavaScript：默认以函数作为作用域(除了let)
        function func(){
            if(1==1){
                var name = 'tom';
            }
            console.log(name);
        }
        func()
    ================ 2.函数的作用域在函数未被调用之前，就已经创建 =======================
    ================ 3.函数的作用域存在作用域链，并且也是在被调用之前创建 ===============
    函数嵌套函数，作用域嵌套作用域，叫作用域链
    示例1：
        name = 'tom';
        function func(){
            var name = 'jim';
            function inner(){
                var name = 'lili';
                console.log(name);  //从内往外查找变量，out:lili
            }
            inner()
        }
        func()
    示例2：
        name = 'tom';
        function func(){
            var name = 'jim';
            function inner(){
                console.log(name);
            }
            return inner;
        }
        var ret = func()
        ret()   //out:jim ; 函数的闭包
    示例3：
        name = 'tom';
        function func(){
            var name = 'jim';
            function inner(){
                console.log(name);
            }
            var name = 'jon';  //等于将变量重新赋值为jon
            return inner;
        }
        var ret = func()
        ret()   //out:jon;
    ================ 4.函数内部局部变量提前声明(声明不是赋值) ===============
    var name  //声明变量,创建了变量name，默认等于undefined
    var name = 'tom'  //变量赋值
    function func(){
        console.log(name);
        var name = 'tom';
    }
    func()  //out:undefined;创建作用域链的同时，找到所有局部变量并声明:var name ;
15、JavaScript面向对象
    当函数中有this时，可以当做一个类，同时也是类的构造方法；
    创建对象使用new关键字创建；
    使用原型prototype，解决内存资源浪费
    function foo(){
        var name = 'tom';
    }
    foo()

    function Foo(n){
        this.name = n;  //定义字段
        this.sayName = function(){  //定义方法,每次创建对象时，都会创建这个方法，浪费内存
            console.log(this.name);
        }
    }
    var obj = new Foo('tom');   //创建对象
    obj.name
    obj.sayName()
    var obj1 = new Foo('tom');   //创建对象，方法会在内存中重复创建
    obj1.name
    obj1.sayName()
    a、this代指对象（类似python中的self）；
    b、创建对象时，new 函数名()

    原型
        function Foo(n){
            this.name = n;
        }
        #Foo.prototype, Foo的原型
        Foo.prototype = {
            'sayName':function(){   //类似字典，方法名:函数体
                console.log(this.name)
            }
        }
        obj1 = new Foo('tom');  //此时创建对象时，不会创建额外的方法，类似Python的类
        obj1.sayName()  //从原型中找
        obj2 = new Foo('jim');
        obj2.sayName()
16、JS正则
    创建正则对象 /.../
        rep = /\d+/
        rep1 = /^\d+$/
    test - 判断字符串是否符合规定的正则
        默认字符串中包含正则表达式就返回true  // rep.test("abc123")-->out:true
        修改正则表达式：rep = /^\d+$/         //rep.test("abc123") -->out:false ;rep.test("123")-->out:true
    exec - 获取匹配的数据
        --
        默认只取第一个值，返回数组。
        使用分组，返回第一个大匹配和其子匹配的数组 // str = 'JavaScript is func JavaBeans!' ;var pattern=/\bJava(\w*)\b/;pattern.exec(str) --> out:["JavaScript","Script"]
        --
        /.../g 全局匹配,一次返回一个，但是多次执行，会逐个返回所有匹配 //str = 'JavaScript is func JavaBeans!' ;var pattern=/\bJava\w*\b/g;pattern.exec(str) --> out:["JavaScript"] -->out:["Script"] -->out:null
        /.../g + 分组
        /.../i 表示不区分大小写
        /.../m 表达多行匹配  //JS正则默认就是多行匹配，此处多行匹配只是影响正则表达式^和$,m模式也会使用^$来匹配换行的内容。
17、组件
    BootStrap
        @media 响应式--CSS的属性
        @font-face  图片以字体形式存在
        简单使用
            如果使用js，它依赖jQuery，先导入jQuery，然后导入BootStrap的js。
            修改样式：
                1、将自己样式放在<link bootstrap.css>下面
                2、当不知道引入的CSS位置时，添加!important    //background-color:red !important;
    后台管理：
        jQueryUI
        EasyUI
</body>
</html>